<template>
  <div class="home">
    <!-- <myHeader :value="title" @input="changeval">todolist</myHeader> -->
    <myHeader v-model="title" @enter="add">todolist</myHeader>
    <myList :list="doing">正在进行</myList>
    <myList :list="done">已经完成</myList>
    <myList :list="list">全部数据</myList>
  </div>
</template>

<script>
import myHeader from "../components/myHeader.vue";
import myList from "../components/myList.vue";
// 辅助函数
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      title: "",
    };
  },

  computed: {
    list() {
      //全部数据
      return this.$store.state.list;
    },
    doing() {
      //正在进行
      return this.$store.state.list.filter((item) => item.status == false);
    },
    done() {
      //已经完成
      return this.$store.state.list.filter((item) => item.status == true);
    },
  },

  methods: {
    add() {
      // this.$store.commit("add1", this.title);
      this.add1(this.title);
      // 用辅助函数
    },
    ...mapMutations(["add1"]),
  },

  components: {
    myHeader,
    myList,
  },
};
</script>


<style lang="scss" scoped>
// .home {
//   height: 10vh;
//   background-color: #333;
//   color: #ccc;
//   display: flex;
//   justify-content: center;
//   align-items: center;
// }
</style>
